<template>
  <div class="page">
    <nav-bar title="网格巡查" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-form input-align="right" :label-width="120">
          <van-field readonly label-class="van-cell__title_gray" v-model="formParams.name" label="巡查点名称" />
          <van-field readonly label-class="van-cell__title_gray" v-model="formParams.content" label="巡查点要求" />
          <div class="inspect-detail-item" v-for="(item, key) in formParams.inspectionPointRecords" :key="key">
            <div
              class="inspect-detail-item--divider"
              v-if="key === 1 && formParams.inspectionPointRecords.length > 1"
            ></div>
            <van-field readonly label-class="van-cell__title_gray" v-model="item.inspectionTime" label="巡查时间" />
            <van-field
              readonly
              label-class="van-cell__title_gray"
              required
              v-model="item.inspectionResultName"
              label="巡查结果"
            />
            <template v-if="item.inspectionResult === '1'">
              <van-field readonly label-class="van-cell__title_gray" required label="异常说明" :border="false" />
              <van-field
                readonly
                v-model="item.abnormal"
                rows="5"
                autosize
                type="textarea"
                :border="false"
                input-align="left"
                class="van-field__value--textarea-lightgray"
              />
            </template>
            <template v-if="item.imageUrl">
              <van-field readonly label="现场照片/视频" :border="false" />
              <van-field class="van-field__value--upload" input-align="left" :border="false">
                <template #input>
                  <van-uploader
                    name="fileList"
                    v-model="item.fileList"
                    :show-upload="false"
                    :deletable="false"
                    @click-preview="previewClick"
                  >
                    <template #preview-cover="file">
                      <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                        <div class="van-uploader__preview-masker"></div>
                        <video-player
                          class="video-player vjs-custom-skin"
                          :playsinline="true"
                          :options="{
                            aspectRatio: '16:16',
                            preload: 'auto',
                            sources: [
                              {
                                src: file.url
                              }
                            ]
                          }"
                        ></video-player>
                      </template>
                    </template>
                  </van-uploader>
                </template>
              </van-field>
            </template>
          </div>
          <div style="padding: 64px 16px">
            <!-- 本次网格巡查状态为巡查中（1为巡查中） && 巡查记录中只有第一次巡查 && 当天（没有日期参数就是当天） -->
            <van-button
              v-if="
                !$route.query.date &&
                formParams.inspectionRecord &&
                formParams.inspectionRecord.times === 2 &&
                formParams.inspectionRecord.inspectionState === '1' &&
                formParams.inspectionPointRecords[formParams.inspectionPointRecords.length - 1].times === 1
              "
              block
              type="info"
              size="large"
              @click="
                $router.push({
                  path: '/inspectvisit/inspect/grid/report',
                  query: $route.query
                })
              "
            >
              再次巡查
            </van-button>
          </div>
        </van-form>
      </van-sticky>
    </div>
    <gb-video :url="videoUrl" :show.sync="videoPopupShow"></gb-video>
  </div>
</template>
<script>
import { formatTimes } from '@/libs/tool'
import InspectVisit from '@/api/inspectVisit'
export default {
  data() {
    return {
      format: ['mp4', 'avi', 'mov'],
      videoPopupShow: false,
      videoUrl: '',
      fileList: [],
      formParams: {}
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      InspectVisit.Grid.detail({
        inspectionPointCode: this.$route.query.inspectionPointCode,
        date: this.$route.query.date || formatTimes.formatDate(new Date())
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.formParams = data
          for (const item of this.formParams.inspectionPointRecords) {
            if (item.imageUrl) {
              item.fileList = item.imageUrl.split(',').map(o => {
                return {
                  url: this.$config.ImageURl + o
                }
              })
            }
          }
        }
      })
    },
    // 视频预览
    previewClick({ url }) {
      const urlArr = url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = url
      }
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/inspectVisit/inspect/detail.less';
</style>
